/*
A: F7E670
B: 93C5F3
C: 2D0404
D: FF1D25
*/

@font-face { font-family:  FuturaRoundBold; src: url('../font/a_FuturaRound Bold.ttf') }
body { background: transparent url(../img/bg.png) 0 0; font-family: FuturaRoundBold,"Comic Sans MS",Calibri,Arial; font-weight: bold; color: #F7E670; min-height: 100%; position: relative; min-width: 1200px; margin: 0 }

.header { height: 160px; width: 100%; position: relative; text-align: center; margin: 0 0 0 -1px; box-shadow: 0 6px 8px #000; z-index: 10 }
.header a.logo { display: inline-block; width: 273px; height: 192px; background: transparent url(../img/logo.png) 0 0 no-repeat }
.header a.logo:hover { background-position: 0 -192px }
.header .top_menu { display: inline-block; padding: 56px 0 0 10px; vertical-align: top }
.header .top_menu i { display: inline-block; width: 125px; height: 60px; text-align: center; font-style: normal }
.header .top_menu i a { display: block; margin: 0 0 20px 0; font-size: 15px; color: #FFF; text-decoration: none; font-weight: bold; letter-spacing: 1px }
.header .top_menu i a:hover { text-decoration: underline; color: #F7E670 }
.header .top_menu i a:active,
.header .top_menu i a.active { color: #93C5F3 }
.header .search { display: inline-block; vertical-align: top; margin: 60px 0 0 27px; width: 201px; height: 38px; background: transparent url(../img/search.png) 0 0 no-repeat; position: relative }
.header .search a { display: block; position: absolute; width: 30px; height: 28px; top: 4px; left: 6px }
.header .search input[type="text"] { margin: 7px 0 0 40px; width: 150px; color: #CCC; font-size: 18px; border: 0 }
.header .search input[type="email"] { margin: 7px 0 0 40px; width: 150px; color: #CCC; font-size: 18px; border: 0 }
.header .menu { position: absolute; top: 100px; left: -8px; z-index: 15 }
.header .menu a { position: absolute; top: 0; left: 0; background: transparent url(../img/blue-menu.png) 0 -64px no-repeat; width: 65px; height: 58px; display: block }
.header .menu a.login:hover,
.header .menu a.login.active { background-position: 0 -2px }
.header .menu a.email { left: 75px; background-position: -77px -64px }
.header .menu a.email:hover,
.header .menu a.email.active { background-position: -77px -2px }
.header .menu a.blog { left: 150px; background-position: -153px -64px }
.header .menu a.blog:hover,
.header .menu a.blog.active { background-position: -153px -2px }

.content { position: relative; z-index: 9 }
.content .inner { width: 1030px; margin: 0 auto; position: relative }
.content .dark { padding: 10px 0; background: transparent url(../img/bg.png) 0 0 }
.content .light { padding: 10px 0; background: transparent url(../img/yellow-bg.png) 0 0; }
.content .title { margin: 25px 0 10px 0; font-size: 28px; color: #2D0404; font-weight: bold; letter-spacing: 1px }

.content a { color: #93C5F3; font-weight: bold; text-decoration: none }
.content a.yellow { color: #F7E670 }
.content a:hover,
.content a.active { color: #FFF }
.content a.yellow:hover,
.content a.yellow:active { color: #93C5F3 }

.content .dark b { display: block; color: #FFF; font-size: 28px; margin: 5px 0 10px 0 }
.content .dark p { text-transform: uppercase }
.content .dark a.back { display: block; margin: -11px auto 30px; width: 157px; height: 34px; background: transparent url(../img/text-arrow.png) 0 -43px no-repeat; }
.content .dark a.back:hover, 
.content .dark a.back:active { background-position: 0 -133px }
.content .light a.more { display: block; margin: 20px auto -11px; width: 89px; height: 41px; background: transparent url(../img/text-arrow.png) 0 0 no-repeat; }
.content .light a.more:hover, 
.content .light a.more:active { background-position: 0 -83px }

.content .freez { display: block; margin: 25px auto 0; background: transparent url(../img/freez.png) 0 0 no-repeat; width: 551px; height: 380px }
.content .freez:hover { background-position: -552px 0 }
.content .want { text-align: center }
.content .want a { display: inline-block; width: 161px; height: 160px; background: transparent url(../img/want.png) 0 0 no-repeat; margin: 15px 19px  }
.content .want a.w1:hover { background-position: 0 -160px }
.content .want a.w2 { background-position: -197px 0 }
.content .want a.w2:hover { background-position: -197px -160px }
.content .want a.w3 { background-position: -394px 0 }
.content .want a.w3:hover { background-position: -394px -160px }
.content .want a.w4 { background-position: -590px 0 }
.content .want a.w4:hover { background-position: -590px -160px }
.content .want a.w5 { background-position: -788px 0 }
.content .want a.w5:hover { background-position: -788px -160px }

.content .food .inner { text-align: center; width: 1080px }
.content .food .inner div { display: inline-block; margin: 30px 25px; vertical-align: middle }
.content .food .inner div > a { display: block; position: relative; text-transform: uppercase; color: #190000; font-size: 20px; font-weight: bold; margin: 0 0 7px 0 }
.content .food .inner div > a i { display: inline-block; position: relative; top: 18px; left: 5px; width: 42px; height: 33px; background: transparent url(../img/text-arrow.png) -144px -2px no-repeat; margin: 0 auto }
.content .food .inner div > i { display: block; width: 264px; height: 264px; background: transparent url(../img/rect.png) 0 0 no-repeat }
.content .food .inner div i img { margin: 9px 0 0 0 }
.content .food .inner div a.arrow_left i { width: 24px; height: 39px; background-position: -205px 0; margin: 33px -20px 0 0 }
.content .food .inner div a.arrow_left i:hover,
.content .food .inner div a.arrow_left i:active { background-position: -159px -77px }
.content .food .inner div a.arrow_right i { width: 24px; height: 39px; background-position: -231px 0; margin: 33px 0 0 -20px }
.content .food .inner div a.arrow_right i:hover,
.content .food .inner div a.arrow_right i:active { background-position: -185px -77px }

.content .ingr { text-align: center }
.content .ingr div { display: inline-block; margin: 0 12px }
.content .ingr div a { display: inline-block; margin: 0 auto; width: 87px; text-decoration: none; color: #2D0404 }
.content .ingr div img { width: 87px; height: 87px }
.content .ingr div a.arrow_left { width: 17px; height: 24px; margin: 0 3px 30px 0; background: transparent url(../img/text-arrow.png) -217px -47px no-repeat }
.content .ingr div a.arrow_left:hover, 
.content .ingr div a.arrow_left:active { background-position: -171px -124px }
.content .ingr div a.arrow_right { width: 17px; height: 24px; margin: 0 0 30px 3px; background: transparent url(../img/text-arrow.png) -238px -47px no-repeat }
.content .ingr div a.arrow_right:hover, 
.content .ingr div a.arrow_right:active { background-position: -192px -124px }
.content .ingr div a.add { width: 87px; height: 87px; background: transparent url(../img/add-btn.png) 0 0 no-repeat }
.content .ingr div a.add:hover, 
.content .ingr div a.add:active { background-position: 0 -87px }

.content .recipe { width: 660px; display: inline-block }
.content .recipe b.name { font-size: 20px; text-transform: uppercase }
.content .recipe a.like { display: block; position: relative; margin: 0 0 15px 0 }
.content .recipe a.like i { display: inline-block; position: relative; top: 5px; left: 1px; width: 16px; height: 15px; background: transparent url(../img/like.png) 0 0 no-repeat }
.content .recipe > i { display: block; float: left; width: 220px; height: 220px; background: transparent url(../img/rect-blue.png) 0 0 no-repeat; margin: 0 15px 15px 0 }
.content .recipe > i img { margin: 10px 0 0 10px }
.content .recipe b { color: #F7E670; font-size: 16px; margin: 5px 0 }
.content .recipe p { text-transform: none; font-size: 14px }
.content .recipe .photo { margin: 20px auto 12px }
.content .recipe .photo a { display: inline-block; margin: 0 0 0 75px }
.content .recipe .photo a.first { margin: 0 }
.content .recipe .photo a.arrow_left { width: 17px; height: 23px; margin: 0 8px 30px 0; background: transparent url(../img/text-arrow.png) -218px -124px no-repeat }
.content .recipe .photo a.arrow_left:hover, 
.content .recipe .photo a.arrow_left:active { background-position: -171px -124px }
.content .recipe .photo a.arrow_right { width: 17px; height: 23px; margin: 0 0 30px 8px; background: transparent url(../img/text-arrow.png) -238px -124px no-repeat }
.content .recipe .photo a.arrow_right:hover, 
.content .recipe .photo a.arrow_right:active { background-position: -192px -124px }
.content .recipe > a { margin: 0 13px; font-size: 18px }
.content .recipe .comment { margin: 20px 0; position: relative }
.content .recipe .comment img { display: inline-block; margin: 0 20px 0 0  }
.content .recipe .comment textarea { display: inline-block; width: 528px; height: 77px; padding: 5px; font-size: 14px; border: 0 }
.content .recipe .comment input[type="button"] { display: block; margin: 8px 0 0 112px; padding: 8px 10px; border-radius: 4px; border: 0; color: #220001; font-size: 15px; font-weight: bold; background-color: #92C5F4 }
.content .recipe .comment input[type="button"]:hover, 
.content .recipe .comment input[type="button"]:active { background-color: #F7E670 }
.content .recipe .comment .trig { position: absolute; display: block; width: 0; height: 0; top: 28px; left: 102px; border-left: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 12px solid #FFF }
.content .recipe a.action:hover { color: #F7E670 }
.content .recipe a.action:active { color: #93C5F3 }

.content .similar { display: inline-block; vertical-align: top; margin: 0 0 0 15px }
.content .similar b { display: block; color: #F7E670; font-size: 18px; }
.content .similar a { display: block; font-size: 16px; text-transform: uppercase; margin: 0 0 10px 0 }

.content .order { margin: 0 0 30px 0 }
.content .order b { display: block; color: #F7E670; font-size: 18px; margin: 0 0 5px 0 }
.content .order .add { margin: 0 0 20px 0 }
.content .order .position { margin: 0 0 5px 0 }
.content .order .add input[type="text"], 
.content .order .position input[type="text"] { width: 330px; margin-right: 4px; padding: 8px 10px; border-radius: 6px; border: 0; color: #220001; font-size: 16px; font-weight: bold; text-transform: uppercase }
.content .order .position input[type="text"] { width: 280px; background-color: #9A8585; color: #F7E670 }

.content .order .add input[type="email"], 
.content .order .position input[type="email"] { width: 330px; margin-right: 4px; padding: 8px 10px; border-radius: 6px; border: 0; color: #220001; font-size: 16px; font-weight: bold; text-transform: uppercase }
.content .order .position input[type="email"] { width: 280px; background-color: #9A8585; color: #F7E670 }
.content .order .position input[name="value"] { width: 75px; text-align: center; color: #220001; background-color: #FFF; }
.content .order .add input[type="button"], 
.content .order .position input[type="button"] { width: 92px; margin-right: 4px; padding: 8px 10px; border-radius: 4px; border: 0; color: #190000; font-size: 15px; font-weight: bold; background-color: #F7E670 }
.content .order .add input[type="button"]:hover,
.content .order .add input[type="button"]:active,
.content .order .position input[type="button"]:hover, 
.content .order .position input[type="button"]:active { background-color: #96C3E9 }
.content .order .position input[name="remove"] { width: 38px; color: #FF1D25 }

.footer { padding: 35px 0 70px 0 }
.footer .social { position: relative; background: transparent url(../img/social.png) 0 0 no-repeat; width: 867px; height: 226px; margin: 0 auto }
.footer .social a { display: block; width: 89px; height: 89px; position: absolute; top: 1px; left: 181px; background: transparent url(../img/social.png) 0 0 no-repeat }
.footer .social a.vk:hover { background-position: -181px -243px }
.footer .social a.facebook { left: 291px }
.footer .social a.facebook:hover { background-position: -292px -243px }
.footer .social a.tweet { left: 407px }
.footer .social a.tweet:hover { background-position: -408px -243px } 
.footer .social a.google { left: 518px }
.footer .social a.google:hover { background-position: -518px -243px }
.footer .social a.ok { left: 630px }
.footer .social a.ok:hover { background-position: -631px -243px }
